<script setup>
  import { ref, toRefs, defineExpose,watch } from 'vue';
  import { useDrawerStore } from '@/store/drawerDataStores.js';
  import { message } from '@/utils/message';


  const drawerStore = useDrawerStore();
  const props = defineProps({
    devVarTableSelectedItem: {
      type: Object,
      default() {
        return {}
      }
    },
    publicForm: {
      type: Object,
      default() {
        return {}
      }
    }
  });
  const { devVarTableSelectedItem, publicForm } = toRefs(props);
  const emit = defineEmits(['childFormObj']);

  const ruleFormRef = ref(),
  ruleFormLeftRef = ref(),
    ruleForm = ref({
      protocolType: undefined, // 协议类型
      protocolAddress: undefined, //协议地址
      protocolNumber: undefined, //协议数量
    }),
    ruleFormLeft = ref({
      passiveAddress: undefined
    }),
    tableData = ref([]);
  // 确定按钮
  const confirmClick = () => {
    if (ruleForm.value.protocolType && ruleForm.value.protocolAddress && ruleForm.value.protocolNumber) {
      // 检查数组中是否已经存在完全相同的对象
      let isDuplicate = tableData.value.some((obj) => {
        return  obj.protocolType === ruleForm.value.protocolType &&
                obj.protocolAddress === ruleForm.value.protocolAddress &&
                obj.protocolNumber === ruleForm.value.protocolNumber;
      });
      if (!isDuplicate) {
        tableData.value.push({
          protocolType: ruleForm.value.protocolType,
          protocolAddress: ruleForm.value.protocolAddress,
          protocolNumber: ruleForm.value.protocolNumber
        })
      }
    }
  };
  // 删除按钮
  const deleteClick = () => {
    if (selectedKey.value.length === 0) {
      message('请选择要删除的数据',{ type: 'warning'});
      return;
    }
    tableData.value = tableData.value.filter(row => !selectedKey.value.includes(row));
    selectedKey.value = [];
  };
  // table多选事件
  const selectedKey = ref([]);
  const handleSelectionChange = (keys) => {
    selectedKey.value = keys;
  };
  // 配置按钮
  const configClick = () => {
    if (selectedKey.value.length > 0 && ruleFormLeft.value.passiveAddress) {
      emit('childFormObj', { ...selectedKey.value[0], ...ruleFormLeft.value});
    } else {
      message('请填写所有的数据', { type: 'warning' });
    }
    /*  this.NetId  */
    // for (let i = 0; i < this.equipment.length; i++) {
    //   if (this.id === this.equipment[i].id) {
    //     this.equipment[i].e_id = this.NetId;
    //   }
    // }
    // for (let i = 0; i < this.production.length; i++) {
    //   if (this.id === this.production[i].id) {
    //     this.production[i].e_id = this.NetId;
    //   }
    // }
    // for (let i = 0; i < this.service.length; i++) {
    //   if (this.id === this.service[i].id) {
    //     this.service[i].e_id = this.NetId;
    //   }
    // }

    // //给协议配置确认按钮对象赋值
    // this.finish_data_1.id = this.id
    // this.finish_data_1.deviceType = this.deviceType
    // this.finish_data_1.deviceName = this.dev_name
    // this.finish_data_1.deviceDescription=""
    // this.finish_data_1.state = 1
    // this.finish_data_1.gatewayId = this.NetId//网关ID
    // this.finish_data_1.createUser=""
    // this.finish_data_1.updateUser=""
    // this.finish_data_1.isDeleted = 0
    // this.finish_data_1.connector = this.port
    // this.finish_data_1.protocol = this.getway_id//协议
    // this.finish_data_1.passiveAddress =this.slaveAddress1
    // this.finish_data_1.passiveIp = this.slaveip
    // this.finish_data_1.passivePort = this.portid
    // this.finish_data_1.protocolType = this.m_type
    // this.finish_data_1.protocolAddress= this.addr
    // this.finish_data_1.protocolNumber = this.num
    // this.finish_data_1.targetAddress = this.tar_addr
    // this.finish_data_1.targetPort = this.tar_port
    // this.finish_data_1.deviceAccount = this.device_account
    // this.finish_data_1.devicePassword = this.device_pwd
    // this.finish_data_1.clientId = this.clientId
    // this.finish_data_1.subscribeTopic = this.sub_topic
    // this.finish_data_1.releaseTopic =this.issue_topic
    // this.finish_data_1.qos = this.qos
    // this.finish_data_1.clearSession = this.cls
    // this.finish_data_1.url = this.URL
    // this.finish_data_1.securityPolicy= this.securityPolicy
    // this.finish_data_1.nodePath = this.file
    // this.finish_data_1.certificates = this.password
    // this.finish_data_1.readingMethod = this.dataReading
    // this.finish_data_1.timeoutSetting = this.timeout
    // this.finish_data_1.baudRate = this.RSbaud
    // this.finish_data_1.dataBit = this.RSdataBit
    // this.finish_data_1.stopBit = this.RSstopBit
    // this.finish_data_1.verify = this.RSschool
    // this.finish_data_1.frameFormat = this.CANZformat
    // this.finish_data_1.frameType = this.CANZtype
    // this.finish_data_1.frameId = this.CANZid
    // this.finish_data_1.wifiAccount = this.WIFIid
    // this.finish_data_1.wifiPassword = this.WIFIpassword
    // this.finish_data_1.isSelected = 1
  };
  // 父组件调用清空函数
  const clearVar = () => {
    ruleFormLeftRef.value.resetFields();
    ruleFormRef.value.resetFields();
    tableData.value = [];
  };
  // 父组件调用保存函数
  const saveStore = () => {
    drawerStore.ruleFormLeft = ruleFormLeft.value;
    drawerStore.tableData = tableData.value;
    drawerStore.RTUForm = ruleForm.value;
  };
  // 父组件调用赋值函数
  const copyStore = () => {
    if (devVarTableSelectedItem.value.state === 1) {
      ruleFormLeft.value.passiveAddress = devVarTableSelectedItem.value.passiveAddress;
      ruleForm.value = {
        protocolType: devVarTableSelectedItem.value.protocolType,
        protocolAddress: devVarTableSelectedItem.value.protocolAddress,
        protocolNumber: devVarTableSelectedItem.value.protocolNumber,
      }
      tableData.value = [{
        protocolType: devVarTableSelectedItem.value.protocolType,
        protocolAddress: devVarTableSelectedItem.value.protocolAddress,
        protocolNumber: devVarTableSelectedItem.value.protocolNumber
      }];
    } else {
      ruleFormLeft.value = drawerStore.ruleFormLeft;
      tableData.value = drawerStore.tableData;
      ruleForm.value = drawerStore.RTUForm;
    }
  };
  defineExpose({
    clearVar,
    saveStore,
    copyStore
  });
</script>

<template>
  <div class="form-main">
    <el-form
      ref="ruleFormLeftRef"
      :model="ruleFormLeft"
      :inline="false"
    >
      <el-form-item label="从站地址" prop="passiveAddress">
        <el-input v-model="ruleFormLeft.passiveAddress" clearable placeholder="请输入从站地址"></el-input>
      </el-form-item>
    </el-form>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :inline="true"
      label-position="top"
    >
      <el-form-item label="类型" prop="protocolType" style="width: 110px;margin-right: 20px;">
        <el-select
          v-model="ruleForm.protocolType"
          placeholder="请选择类型"
        >
          <el-option label="coil" value="coil" />
          <el-option label="register" value="register" />
        </el-select>
      </el-form-item>
      <el-form-item label="地址" prop="protocolAddress" style="width: 110px;margin-right: 20px;">
        <el-input v-model="ruleForm.protocolAddress" placeholder="请输入地址"></el-input>
      </el-form-item>
      <el-form-item label="数量" prop="protocolNumber" style="width: 110px;margin-right: 20px;">
        <el-input v-model="ruleForm.protocolNumber" placeholder="请输入数量"></el-input>
      </el-form-item>
      <el-form-item style="width: 50px;">
        <el-button type="primary" class="form-btn" @click="confirmClick">确定</el-button>
      </el-form-item>
      <el-form-item style="width: 50px;margin-right: 0px;">
        <el-button type="primary" class="form-btn" @click="deleteClick">删除</el-button>
      </el-form-item>
    </el-form>
    <div class="form-table">
      <el-table
        ref="multipleTableRef"
        class="custom-table"
        :data="tableData"
        border
        stripe
        max-height="200"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center"/>
        <el-table-column prop="protocolType" label="类型" align="center"></el-table-column>
        <el-table-column prop="protocolAddress" label="地址" align="center"></el-table-column>
        <el-table-column prop="protocolNumber" label="数量" align="center"></el-table-column>
      </el-table>
    </div>
    <div class="config-btn">
      <el-button type="primary" @click="configClick">配置</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .form-btn {
    margin-top: 30px;
  }

  .form-table {
    padding-bottom: 20px;
  }

  .config-btn {
    text-align: right;
  }
</style>
